<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>不使用 CSS3 box-sizing 属性</title>
    <style>
        /* 不使用 CSS3 box-sizing 属性 */
        /* 默认情况下，元素的宽度与高度计算方式如下： */
        /* width(宽) + padding(内边距) + border(边框) = 元素实际宽度 */
        /* height(高) + padding(内边距) + border(边框) = 元素实际高度 */
        /* 这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。 */

        /* 以上两个 <div> 元素虽然宽度与高度设置一样，但真实展示的大小不一致，因为 div2 指定了内边距: */
        .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
        }

        .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
        }

        /* 使用这种方式如果想要获得较小的那个框且包含内边距，就不得不考虑到边框和内边距的宽度。 */
        /* CSS3 的 box-sizing 属性很好的解决了这个问题。 */
    </style>
</head>

<body>

    <div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
    <br>
    <div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>

</body>

</html>